<template>
	<view class="s-datetime-picker">
		<!-- 遮罩层 -->
		<view :class="['popup-mask',  showPicker?'show':'']" @tap="cancel"></view>
		<!-- 内容 -->
		<view :class="['popup-content',  showPicker?'show':'']">
			<!-- 顶部 -->
			<view class="popup-content-head" @touchmove.stop.prevent catchtouchmove="true">
				<view class="item-btn" @tap="cancel">取消</view>
				<view class="range-text">
					{{ title }}
				</view>
				<view class="item-btn confirm-btn" @tap="handleConfirm">确定</view>
			</view>
			<!-- 时间选择器 -->
			<view class="picker-view-block">
				<picker-view v-if="showPicker" :value="current" @change="onDateTimeChange" class="picker-view" indicator-style="height: 44px;">
					<!-- 月份 周几 -->
					<picker-view-column>
						<view class="select-item" v-for="(item,index) in dayList" :key="index">{{ item | pickerViewDateFilter }}</view>
					</picker-view-column>
					<!-- 时 -->
					<picker-view-column>
						<view class="select-item" v-for="(item,index) in hourList" :key="index">{{item}}时</view>
					</picker-view-column>
					<!-- 分 -->
					<picker-view-column>
						<view class="select-item" v-for="(item,index) in minuteList" :key="index">{{item}}分</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
	</view>
</template>

<script>
	import dayjs from 'dayjs';
	export default {
		name: "times-picker-single",
		props: {
			title: {
				type: String,
				default: '请选择'
			}
		},
		data() {
			return {
				showPicker: false,
				dayList: [], // 结束 天列表
				hourList: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14',
					'15', '16', '17', '18', '19', '20', '21', '22', '23'
				], // 时列表
				minuteList: ['00', '10', '20', '30', '40', '50'], // 分钟列表 
				current: [0, 0, 0], //时间对应的下标
				dateValue: '', // 结束日期
			};
		},
		filters: {
			pickerViewDateFilter(val) {
				var dayjsVal = dayjs(val)
				var week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				var weekStr = week[dayjsVal.day()]
				return `${dayjsVal.format('MM月DD日')} ${weekStr}`
			}
		},
		methods: {
			// 初始化
			init(limitTime) {
				/**
				 * 计算 dayList
				 * 开始时间可选范围，初始日期 + 30
				 */
				var maxOptionDay = 30;
				var begin = dayjs(limitTime).format('YYYY-MM-DD')
				var end = dayjs(limitTime).add(maxOptionDay, 'days').format('YYYY-MM-DD')
				this.dayList = this.formatEveryDay(begin, end); // 结束日期组

				this.current[0] = 1
				
				// 处理时和分的默认值
				var limitTimeDayjs = dayjs(limitTime)
				this.hourList.forEach((item, index)=>{
					if(item == limitTimeDayjs.get('h')){
						this.current[1] = index;
					}
				})
				this.minuteList.forEach((item, index)=>{
					if(item == limitTimeDayjs.get('minute')){
						this.current[2] = index;
					}
				})

				this.updateDate()
			},
			// 获取开始及结束之间的时间集合（格式：xx年xx月xx日 周x）
			formatEveryDay(start, end) {
				let dateList = [];
				var startTime = new Date(dayjs(start).format('YYYY-MM-DD'));
				var endTime = new Date(dayjs(end).format('YYYY-MM-DD'));

				while ((endTime.getTime() - startTime.getTime()) >= 0) {
					var year = startTime.getFullYear();
					var month = startTime.getMonth() + 1;
					var date = startTime.getDate();
					dateList.push(year + "-" + month + "-" + date);

					startTime.setDate(startTime.getDate() + 1);
				}
				return dateList;
			},
			/**
			 * 日期时间发生变化
			 */
			onDateTimeChange(e) {
				const selectVal = e.detail.value

				this.current = selectVal;
				this.updateDate()
			},
			/**
			 * 根据 current 更新 date
			 */
			updateDate() {
				let current = this.current
				let dayList = this.dayList

				let current$0 = current[0]
				let current$1 = current[1]
				let current$2 = current[2]

				let day = dayList[current$0]
				let hour = this.hourList[current$1]
				let minute = this.minuteList[current$2]

				const dateTimeStr = `${day} ${hour}:${minute}`
				
				this.dateValue = dateTimeStr
			},
			// 打开
			open() {
				this.showPicker = true;
			},
			// 关闭
			close() {
				this.showPicker = false;
			},
			// 取消
			cancel() {
				this.close();
			},
			// 确定
			handleConfirm() {
				this.$emit('confirm', dayjs(this.dateValue).format('YYYY-MM-DD HH:mm:00'));
				// 关闭弹框
				this.close();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.popup-mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.4);
		visibility: hidden;
		opacity: 0;
		transition: all 0.3s ease;

		&.show {
			visibility: visible;
			opacity: 1;
		}
	}

	.popup-content {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: all 0.3s ease;
		transform: translateY(100%);
		z-index: 99999;
		background-color: #ffffff;
		// 安全底部距离
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		&.show {
			transform: translateY(0);
		}

		&-head {
			width: 100%;
			height: 120rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 2px solid #f1f2f5;
			color: #1f2334;

			.item-btn {
				font-size: 32rpx;
				font-weight: 400;
				line-height: 44rpx;
				padding: 28rpx;
			}

			.range-text {
				font-size: 28rpx;
				font-weight: 700;
				line-height: 40rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.default-tips{
				font-weight: 300;
				color: #2F86F6;
				font-size: 24rpx;
			}

			.confirm-btn {
				color: #2f86f6;
				font-weight: 700;
			}
		}

		.picker-tab-block {
			display: flex;

			.picker-select-item {
				padding: 12rpx 0;
				flex: 1;
				background-color: #f3f6fb;
				color: #000000;
				text-align: center;
				font-size: 22rpx;
				font-weight: 400;
				line-height: 32rpx;

				.date {
					margin-top: 2rpx;
					font-size: 26rpx;
					line-height: 36rpx;
				}

				&.is-actived {
					background-color: #282e44;
					color: #ffffff;
				}
			}
		}

		.picker-view-block {
			height: 446rpx;
		}

		.picker-view {
			height: 100%;
			box-sizing: border-box;

			.select-item {
				text-align: center;
				width: 100%;
				height: 44px;
				line-height: 44px;
				text-overflow: ellipsis;
				white-space: nowrap;
				font-size: 30rpx;
			}
		}
	}
</style>
